<template>
	<e-popup :show="showCouponPop" round="20rpx"  :style="[AppSkinVar]">
		<view class="">
			<view class="e-flex e-flex-xy-center e-p-24">
				<text class="c-333 e-font-32 fw-600">{{$t('order.优惠详情')}}</text>
				<image class="img-36 e-abso coupon-close" :src="$staticPath('classify/close.png')" mode="aspectFit"
					@tap="showCouponPop = false"></image>
			</view>
			<view class="e-font-24 c-80 e-p-36 e-m-b-24">
				{{$t('order.优惠券说明')}}
			</view>
			<view
				class="e-font-26 c-333 fw-600 e-m-b-30 e-flex e-flex-between e-p-l-36 e-p-r-36"
				v-if="!isOpen">
				<view class="e-flex">
					{{$t('classify.组合优惠')}}
				</view>
				<view class="e-flex">
					<!-- <text class="e-m-r-10"
						:style="{color:AppSkin.primary}">{{$t('classify.减')}}{{$unitEn}}{{couponList | getAllMoney}}</text> -->
					<app-image v-if="isOpen === 0" :size="['36rpx']" src="classify/black-radio.png">
					</app-image>
					<app-image v-else :size="['36rpx']" src="classify/radio.png" @click="handleChangeUse(1)">
					</app-image>
				</view>
			</view>
			<view class="e-p-36 coupon-body" v-if="isOpen && list.length">
				<view class="e-m-b-30" v-for="item in list" :key="item.storeId"
					@tap="handleChangeSelect(item)">
					<view class="e-font-24 c-333 fw-600 e-m-b-30 e-flex" v-if="!isPlat">
						<view class="e-m-r-10">
							<load-image :size="['36rpx']" :src="item.storeLogo">
							</load-image>
						</view>

						<text>{{item.storeName}}</text>
					</view>
					<view class="e-m-b-20 e-flex e-flex-between">
						<text><text>{{$t(isPlat ? 'order.平台优惠' : 'classify.店铺优惠')}}</text></text>
						<view class="e-flex">
							<text class="e-m-r-10 c-primary">{{$t('classify.减')}}
								{{$unitEn}}{{item.money}}</text>
							<app-image v-if="item.check" :size="['36rpx']" src="classify/selected-radio.png">
							</app-image>
							<app-image v-else :size="['36rpx']" src="classify/radio.png">
							</app-image>
						</view>
					</view>
					<view class="e-flex e-flex-wrap e-m-b-24">
						<view class="image-list e-m-r-20 e-m-b-10" v-for="(url,index) in item.productUrls"
							:key="index">
							<load-image :size="['138rpx']" redius="10rpx" :src="url">
							</load-image>

						</view>
					</view>
					<view class="e-flex e-m-b-20  e-font-20" v-if="!isPlat">
						<view class="coupon-type-box c-primary" style="border-color: var(--color-primary)"
							v-if="item.couponType === 1">
							<text v-if="item.minPoint">
								{{$t('public.满')}} {{$unitEn}} {{item.minPoint}} {{$t('classify.减')}}
								{{$unitEn}}{{item.money}}
							</text>
							<text v-else>
								{{$t('classify.减')}} {{$unitEn}}{{item.money}}
							</text>
						</view>
						<view class="coupon-type-box c-primary" style="border-color: var(--color-primary)"
							v-else-if="item.couponType === 2">
							<text v-if="item.minPoint">
								{{$t('public.满')}} {{$unitEn}}{{item.minPoint}} {{$t('public.打')}}
								{{item.discountScale}}{{$t('public.折')}}
							</text>
							<text v-else>
								{{$t('public.打')}}{{item.discountScale}}{{$t('public.折')}}
							</text>
						</view>
						<view class="coupon-type-box c-primary" style="border-color: var(--color-primary)" v-else>
							<text v-if="item.minPoint">
								{{$t('public.满')}} {{$unitEn}}{{item.minPoint}} {{$t('classify.折扣')}}
								{{item.discountScale}}%
							</text>
							<text v-else>
								{{item.discountScale}}%
							</text>
						</view>
						<view class="e-m-l-20 c-303133 e-font-24">
							{{$t('nearby.小计')}}: {{$unitEn}}{{item.moneyAll}}，{{$t('classify.减')}}
							{{$unitEn}}{{item.money}}
						</view>
					</view>
					<view class="e-flex e-font-20" v-if="isPlat">
						<view class="coupon-type-box c-primary" style="border-color: var(--color-primary)"
							v-if="item.couponType === 1">
							<text v-if="item.minPoint">
								{{$t('public.满')}} {{$unitEn}}{{item.minPoint}} {{$t('classify.减')}}
								{{$unitEn}}{{item.money}}
							</text>
							<text v-else>
								{{$t('classify.减')}} {{$unitEn}}{{item.money}}
							</text>
						</view>
						<view class="coupon-type-box c-primary" style="border-color: var(--color-primary)" v-else>
							<text v-if="item.minPoint">
								<template v-if="item.couponType == 2">{{$t('public.满')}} {{$unitEn}}{{item.minPoint}}
									{{$t('public.打')}} {{item.discountScale}}{{$t('public.折')}}</template>
								<template v-else>{{$t('public.满')}} {{$unitEn}}{{item.minPoint}} {{$t('public.打')}}
									{{item.discountScale}}%</template>

							</text>
							<text v-else>
								<template v-if="item.couponType == 2">{{$t('public.打')}}
									{{item.discountScale}}{{$t('public.折')}}</template>
								<template v-else>{{$t('public.打')}} {{item.discountScale}}%</template>
							</text>
						</view>
						<view class="e-m-l-20 c-303133 e-font-24">
							{{$t('nearby.小计')}} {{$unitEn}}{{item.moneyAll}}，{{$t('classify.减')}}
							{{$unitEn}}{{item.money}}
						</view>
					</view>
				</view>
			</view>
			<view class="e-p-36 e-flex e-flex-between ">
				<text class="e-font-24 c-333 fw-600">{{$t('order.不使用')}}</text>
				<app-image v-if="isOpen === 0" :size="['36rpx']" src="classify/black-radio.png">
				</app-image>
				<app-image v-else :size="['36rpx']" src="classify/radio.png" @click="handleChangeUse(0)">
				</app-image>

			</view>
			<view class="btn-box e-flex-xy-center bg-primary" @tap="handleSubmit">
				<text class="fw-500 e-font-28 c-white">{{$t('common.确定')}}</text>
			</view>
		</view>
	</e-popup>
</template>
<script lang="ts">
	import {
		defineComponent
	} from 'vue'
	export default defineComponent({
		// #ifdef MP-WEIXIN
		// 将自定义节点设置成虚拟的，更加接近Vue组件的表现
		options: {
			virtualHost: true
		},
		// #endif
	})
</script>
<script setup lang="ts">
	import { ref, computed, watch } from 'vue'
	import type { OrderCouponsItem } from '@/common/request/api'
	const props = defineProps({
		value: Boolean,
		isPlat: Boolean,// 是否平台优惠
		couponList: {
			type: Array,
			default: () => []
		},
	})
	const emits = defineEmits(['update:value', 'update:couponList', 'changeCouponStatus', 'closeUse'])
	const showCouponPop = computed({
		get() {
			return props.value
		},
		set(v) {
			emits('update:value', v)
		}
	})
	const list = computed<OrderCouponsItem[]>({
		get() {
			return props.couponList as OrderCouponsItem[]
		},
		set(v) {
			emits('update:couponList', v)
		}
	})
	const isOpen = ref(1)

	watch(list, (val) => {
		isOpen.value = val?.some(item => item.check) ? 1 : 0
	})


	const handleChangeUse = (type : number) => {
		isOpen.value = type
		if (isOpen.value) {
			const flag = list.value.every(evy => !evy.check)
			if (flag) {
				list.value.sort((a, b) => b.money - a.money)
				list.value[0].check = true
			}
		} else {
			emits('closeUse')
		}
	}
	const handleSubmit = () => {
		emits('changeCouponStatus', list.value)
		showCouponPop.value = false
	}
	const handleChangeSelect = (opt : OrderCouponsItem) => {
		list.value.forEach(item => {
			if (item.id === opt.id) {
				item.check = true
			} else {
				item.check = false
			}
		})
	}
</script>

<style lang="scss" scoped>
	.coupon-close {
		top: 24rpx;
		right: 24rpx;
	}

	.c-80 {
		color: #808080;
	}

	.btn-box {
		height: 80rpx;
		border-radius: 40rpx;
		margin: 30rpx;
	}

	.e-flex-wrap {
		flex-wrap: wrap;
	}

	.coupon-type-box {
		border: 1rpx solid;
		padding: 4rpx 10rpx;
		border-radius: 6rpx;
	}


	.coupon-body {
		max-height: 800rpx;
		overflow: auto;
	}
</style>